Quiero cambiar el color del borde y el color del texto cuando la entrada está deshabilitada. Probé todas las variantes como se ve a continuación:
const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', }, '& .MuiOutlinedInput-root': { color:darkMode?'#1976d2':'', '& fieldset': { borderColor:darkMode?'#1976d2':'', }, '&:hover fieldset': { borderColor: darkMode?'#1976d2':'', }, }, "& input.Mui-disabled": { color: "green" } }; <TextField value={formState.vinInput} type="text" label="Stack" sx={textFieldStyle}/>
¡El resto del estilo funciona bien como el color general y el color enfocado!
puedes usar este código en v4:
MuiInputBase: { root: { "&$disabled": { color: "red", border: "1px solid red" } } }basado en la documentación de Material-ui en la versión 5 La sintaxis $ utilizada con JSS no funcionará con Emotion. Debe reemplazar esos selectores con un selector de clase válido.
este es el estilo
const useStyles = makeStyles({ customDisable: { "& .MuiInputBase-input.Mui-disabled": { color: "red !important", "-webkit-text-fill-color": "red !important", borderColor: "red !important" }, "& .Mui-disabled .MuiOutlinedInput-notchedOutline": { borderColor: "red !important" } } });y luego en TextField así
<TextField disabled className={classes.customDisable} id="outlined-disabled" defaultValue="Hello World" />aquí está el Codesandbox